<template>
	<view>
		<view class="row pt80 cen">
			<view class="jhhbsrrt fz28 z9 pr" :class="ikdx==idx+1?'act':''" v-for="(sd,idx) in jhhnsd" :key="idx" @tap="seertt(idx)">
				<view class="f_b pr">
					{{sd}}
					<text class="xiahuaxian"></text>
				</view>
			</view>
		</view>
		<view class="mt130">
			<movable-swiper :dataList="ctlist" :height="movHeight" v-if="ikdx==1 &&ctlist.length>0">
				<template v-slot="{movSlotData}">
					<navigator class="caskjeert pr" :url="'/pages/index/vehicleDetails?type=0&carid='+movSlotData.id">
						<text class="jjnndeer" v-if="movSlotData.status==1">当前</text>
						<view v-if="movSlotData.status!=1" class="qiehunaeert" >
								<text  @tap.stop="qiehuans(movSlotData.id,movSlotData.devsn)">切换</text>
						</view>
						<view class="jjnknmxeert cen">
							<view class="pr f_b" @tap.stop="bangdingsd">
								<image :src="movSlotData.image" class="kkmjmxeert"></image>
								<view class="kjnnkbnnder" :hidden="!movSlotData.network">
									<image src="../../static/img/bangding.png" mode="widthFix" class="bangndertwe cz" ></image>
								</view>
							</view>
							<view class="mt30 cf fz40">
								{{movSlotData.name}}
							</view>
							<view class="cf fz28 mt10">
								{{movSlotData.license_full}}
							</view>
							<view class="mt20">
								<uni-icons type="lanya" color="#fff"></uni-icons>
								<text class="cf fz26 ml5">GPS</text>
								<uni-icons type="gd" class="cf cz" size="20"></uni-icons>
							</view>
							<view class="fdgdftywwer"> 
								<view class="mt80 row  ">
									<view class="col" @tap.stop="getlocation(movSlotData.devsn,movSlotData.license_full)">
										<image src="../../static/img/sdfsdfda.png" class="cz ddjjeertx" mode="widthFix"></image>
										<view class="z9 fz24 mt10">
											实时位置
										</view>
									</view>
									<view @tap.stop="tiomsjd('/pages/leftSideMenu/TripReport')" class="col">
										<image src="../../static/img/sdfsdfdb.png" class="cz ddjjeertx" mode="widthFix"></image>
										<view class="z9 fz24 mt10">
											行程报告
										</view>
									</view>
									<view class="col" @tap.stop="tiomsjd('/pages/index/RecordPerfectCondition?devsn='+movSlotData.devsn)">
										<image src="../../static/img/sdfsdfdc.png" class="cz ddjjeertx" mode="widthFix"></image>
										<view class="z9 fz24 mt10">
											车况记录
										</view>
									</view>
								</view>
							</view>
						</view> 
					</navigator>
				</template>
			</movable-swiper>
			<movable-swiper :dataList="ctlist" :height="movHeight" v-if="ikdx==2 &&ctlist.length>0">
				<template v-slot="{movSlotData}">
					<navigator class="caskjeert pr" :url="'/pages/index/vehicleDetails?type=1&carid='+movSlotData.id">
						<text class="jjnndeer" v-if="movSlotData.status==1">当前</text>
						<view v-if="movSlotData.status!=1" class="qiehunaeert" >
								<text  @tap.stop="qiehuans(movSlotData.id,movSlotData.devsn)">切换</text>
						</view>
						<view class="jjnknmxeert cen">
							<view class="pr f_b">
								<image :src="movSlotData.image" class="kkmjmxeert"></image>
							</view>
							<view class="mt30 cf fz40">
								{{movSlotData.nickname}}
							</view>
							<view class="cf fz28 mt10">
								{{movSlotData.license_full}}
							</view>
							<view class="mt20">
								<uni-icons type="lanya" color="#fff"></uni-icons>
								<text class="cf fz26 ml5">GPS</text>
								<uni-icons type="gd" class="cf cz" size="20"></uni-icons>
							</view>
							<view class="fdgdftywwer">
								<view class="mt80 row  ">
									<view class="col"  @tap.stop="getlocation(movSlotData.devsn,movSlotData.license_full)">
										<image src="../../static/img/sdfsdfda.png" class="cz ddjjeertx" mode="widthFix"></image>
										<view class="z9 fz24 mt10">
											实时位置
										</view>
									</view>
									<view @tap.stop="tiomsjd('/pages/leftSideMenu/TripReport')" class="col">
										<image src="../../static/img/sdfsdfdb.png" class="cz ddjjeertx" mode="widthFix"></image>
										<view class="z9 fz24 mt10">
											行程报告
										</view>
									</view>
									<view class="col" @tap.stop="tiomsjd('/pages/index/RecordPerfectCondition')">
										<image src="../../static/img/sdfsdfdc.png" class="cz ddjjeertx" mode="widthFix"></image>
										<view class="z9 fz24 mt10">
											车况记录
										</view>
									</view>
								</view>
							</view>
						</view>
					</navigator>
				</template>
			</movable-swiper>
			
			<view class="cen z9 fz30 cen mt100" v-if="ikdx==1 &&ctlist.length<=0">
				<view class="llknnneert pr">
					<image src="../../static/img/qs/dddda.png" class="jjjhnmnxerrta cz"></image>
					<image src="../../static/img/qs/ddddb.png" class="jjnnkxerrae"></image>
				</view>
				暂无车辆
			</view>
			<view class="cen z9 fz30 cen mt100" v-if="ikdx==2 &&ctlist.length<=0">
				<view class="llknnneert pr">
					<image src="../../static/img/qs/dddda.png" class="jjjhnmnxerrta cz"></image>
					<image src="../../static/img/qs/ddddb.png" class="jjnnkxerrae"></image>
				</view>
				暂无车辆
			</view>
		</view>
	</view>
</template>
<script>
	import movableSwiper from '@/components/movable-swiper/movable-swiper.vue'
	export default {
		data() {
			return {
				ikdx: 1,
				jhhnsd: [
					'我的车',
					'借的车'
				],

				movHeight: '800rpx', //卡片高度
				//传入的数据示例
				lastDataList: [{
					'img':'http://duxinggj.com/www/static/img/2.jpg',
					'text':'666'
				},{
					'img':'http://duxinggj.com/www/static/img/2.jpg',
					'text':'666'
				},{
					'img':'http://duxinggj.com/www/static/img/2.jpg',
					'text':'666'
				},{
					'img':'http://duxinggj.com/www/static/img/2.jpg',
					'text':'666'
				}],
				lastDataLister: [1, 2, 3, 4, 5, 6, 7, 89],
				car:"",//获取当前车辆信息
				ctlist:[]//获取的我的车列表
			}
		},
		components: {
			movableSwiper
		},
		onNavigationBarButtonTap(e) {
			let th = this
			if (e.index == 1) {
				uni.showActionSheet({
					itemList: ['添加车辆', '批量体检'],
					success(e) {
						if(e.tapIndex==0){
							uni.navigateTo({
								url:'AddVehicle'
							})
						} else if(e.tapIndex==1){
							uni.navigateTo({
								url:'BatchCheckUp'
							})
						}
					}
				})
			}
		},
		methods: {
			duixjs(data){
				console.log(data)
				return JSON.parse(data)
			},
			getlocation(devsn,license){
				// let param = {}
				// let timestamp=(new Date()).getTime()
				// timestamp=timestamp.toString()
				// console.log(timestamp);
				// let nowtimestamp = timestamp.substr(0, timestamp.length - 4);
				// let sttimestamp = parseInt(nowtimestamp)-100
				// param.devCode = devsn
				// param.startTime = sttimestamp
				// param.endTime = nowtimestamp+5
				// param.pageIndex = 1
				// param.pageSize = 10
				let that = this
				that.dqVehState(devsn,(params)=>{
					
					let Longitude = 0,Latitude = 0,GnssDirection=0
					// GnssLat 纬度
					if(params.data[0].hasOwnProperty('GnssLat')){
						if(params.data[0].GnssLat>0){
							Latitude = params.data[0].GnssLat
						}
					}
					// GnssLat  经度
					if(params.data[0].hasOwnProperty('GnssLon')){
						if(params.data[0].GnssLon>0){
							Longitude = params.data[0].GnssLon
						}
					}
					// GnssDirection gps方向
					if(params.data[0].hasOwnProperty('GnssDirection')){
						GnssDirection = params.data[0].GnssDirection
					}
					// uni.showToast({
					// 	title:JSON.stringify(params)+'设备号：'+devsn+'车牌号'+license+"经纬度"+Latitude+'----'+Longitude+'gps方向'+GnssDirection,
					// 	icon:"none"
					// })
					// return 
					// uni.showToast({
					// 	title:"刷新成功"+'位置信息+'+params.data[0].GnssLat+'++++'+params.data[0].GnssLat+'赋值信息'+that.GnssLon+'----'+that.GnssLat,
					// 	icon:"none"
					// })
					if(Latitude ==0 || Longitude == 0){
						uni.showToast({
							title:"暂无位置信息",
							icon:"none"
						})
						return 
					}
					// console.log('/pages/index/RealTimeLocation?Longitude='+Longitude+'&Latitude='+Latitude+'&devsn='+devsn+'&GnssDirection='+GnssDirection+'&license='+license);
					uni.navigateTo({
						url:'/pages/index/RealTimeLocation?Longitude='+Longitude+'&Latitude='+Latitude+'&devsn='+devsn+'&GnssDirection='+GnssDirection+'&license='+license
					})
				})
				// this.dqDeviceGps(param,(e)=>{
					
				// })
				// uni.navigateTo({
				// 	url:'/pages/index/RealTimeLocation?Longitude=116.397128&Latitude=39.916527&devsn='+devsn
				// })
			},
			rssical(code){
				if(code ==0 || code ==1){
					this.carstatusinitgps.sig = 1
				}else if(1<code <=5){
					this.inicarinfo.signal = 2
				}else if(5<code <=11){
					this.carstatusinitgps.sig = 3
				}else if(11<code <=17){
					this.carstatusinitgps.sig = 4
				}else if(17<code <=24){
					this.carstatusinitgps.sig = 5
				}else{
					this.carstatusinitgps.sig = 5
				}
			},
			bangdingsd() {
				uni.navigateTo({
					url: "BindingNetworking"
				})
			},
			seertt(idx) {
				this.ikdx = parseInt(idx)+1 
				this.carlist(this.ikdx)
			},
			qiehuans(id,devsn) {
				// console.log(id)
				// console.log(e);
				// console.log(devsn);
				  // let id = e.currentTarget.dataset.id;//这里item是一个[Object Object]字符
				  // let devsn = e.currentTarget.dataset.devsn;
				 // uni.showToast({
				 // 	content:"车辆："+id+"设备号："+devsn+'用户：'+this.islogin()
				 // })
				var that=this
				
				uni.showModal({
					title: '',
					content: '切换为当前车辆',
					success: function (res) {
						if (res.confirm) {
							// console.log(id+'-------------------------'+devsn);
							that.cutcar(id,devsn)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				})
			},
			async cutcar(id,devsn){
				// uni.showModal({
				// 	content:"车辆aa："+id+"设备号aa："+devsn
				// })
				let params={}	
				let shcar=await this.get('/api/car/'+id+'/switch',params,'PUT')
				console.log("切换车辆",shcar)
				
				// uni.showToast({
				// 	title:'ID'+id+"设备号："+devsn+'返回数据'+JSON.stringify(shcar),
				// 	icon:"none"
				// })
				// uni.showToast({
				// 	title:'切车辆'+JSON.stringify(shcar),
				// 	icon:"none"
				// })
				if(shcar.code==0){
					// this.$store.commit('setintdevsn',devsn)
					// this.$store.commit('setisintcar', false)
					// this.dqGetDevInfo(devsn)
					
					if(this.$store.state.isintcar && this.$store.state.intdevsncar){
						this.delDeviceInfo()
					}
					this.carlist(this.ikdx)
				}
			},
			tiomsjd(url) {
				uni.navigateTo({
					url: url
				})
			},			
			async carlist(type){
				// uni.showToast({
				// 	title:'请求类型'+type,
				// 	icon:"none"
				// })
				let clist=await this.get('/api/car/'+type+'/my')
				console.log("我的车",clist)
				this.ctlist=clist.data
			}
		},
		onLoad() {
			// uni.showToast({
			// 	title:'是否初始化',
			// 	icon:"none"
			// })
			// let param = {}
			// 	console.log('---------------------------');
			// this.dqDeviceGps(param,(e)=>{
			// 	console.log('---------------------------');
			// 	console.log(e);
			// })
			var th = this
			var token=uni.getStorageSync('access_token')
			if(!token){ 
				uni.navigateTo({
					url:"/pages/user/LoginAndRegistration"
				})
			}	
			
		},
		onShow() {
			// uni.showModal({
			// 	title:'是否初始化'+this.$store.state.isintcar
			// })
			// that.$store.state.isintcar
				// var sdf = this
				// uni.showModal({
				// 	title:'显示11'+sdf.$store.state.isopencar 
				// })
			this.carlist(this.ikdx)
		},
		mounted() {

		}
	}
</script>
<style scoped>
	.jjnndeer {
		position: absolute;
		left: 0;
		top: 0;
		width: 136upx;
		height: 54upx;
		background: linear-gradient(90deg, rgba(27, 213, 185, 1) 0%, rgba(22, 137, 213, 1) 100%);
		border-radius: 12upx 0px 0px 0px;
		text-align: center;
		line-height: 54upx;
		font-size: 24upx;
		color: #fff;
	}

	.jjnknmxeert {
		padding-top: 128upx;
	}

	.kkmjmxeert {
		width: 246upx;
		height: 246upx;
	}

	.ddjjeertx {
		width: 56upx;
	}

	.qiehunaeert {
		font-size: 28upx;
		color: rgba(255, 255, 255, 1);
		width: 112upx;
		height: 60upx;
		line-height: 60upx;
		border: 2upx solid rgba(255, 255, 255, 1);
		border-radius: 60upx;
		text-align: center;

		position: absolute;
		right: 20upx;
		top: 20upx;
	}

	.kjnnkbnnder {
		width: 44upx;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		background: rgba(222, 222, 222, 1);
		border-radius: 50%;
		position: absolute;
		right: -14upx;
		bottom: -4upx;
	}

	.bangndertwe {
		width: 24upx;

	}
</style>
